<template>
  <n-space>
    <full-table
      ref="tableRef"
      cache-key="role-manage"
      :columns="columns"
      :request="getList"
      :row-key="(row) => row.id"
    >
      <template #left-top>
        <n-button type="info" @click="handleAdd"> 新建 </n-button>
      </template>
    </full-table>

    <create-drawer
      ref="drawerRef"
      :page-type="formType"
      :data="checkedRow"
      @submit-success="tableRef?.getData"
    />
    <assign-perms ref="assignRef" :role="checkedRow" />
  </n-space>
</template>

<script lang="tsx" setup>
import { useTable } from "./common";
import CreateDrawer from "./components/create-drawer/index.vue";
import AssignPerms from "./components/assign-perms/index.vue";
import { FullTableInst } from "@/components/common/full-table";
import { useService } from "./service";

defineOptions({ name: "ManageRole" });

const tableRef = ref<FullTableInst>();
const drawerRef = ref();
const assignRef = ref();
const formType = ref<"add" | "edit">("add");
const checkedRow = ref<Role>();

const showCreateDrawer = (type: "add" | "edit") => {
  formType.value = type;
  drawerRef.value.show();
};

const showAssignModal = () => assignRef.value.show();

const getData = () => tableRef.value?.getData();

const {
  getList,
  handleUpdateStatus,
  handlePerms,
  handleAdd,
  handleEdit,
  handleRemove,
} = useService(checkedRow, showCreateDrawer, showAssignModal, getData);

const { columns } = useTable(
  handleUpdateStatus,
  handlePerms,
  handleEdit,
  handleRemove
);
</script>
